<template>
    <div class="home-title">
        早上好！{{ globalStore.doctorInfo?.name }}
    </div>
    <!-- 顶部统计数据 -->
    <div class="top-statistics">
        <el-card style="border: none; width: 265px; height: 121px;border-radius: 10px;" shadow="never"
            v-for="item in homeCountData" :key="item._id">
            <div class="stat-item">
                <div class="item-img" :style="{ backgroundColor: item.color }">
                    <img :src="item.icon" alt="">
                </div>
                <div>
                    <div class="resident">{{ item.title }}</div>
                    <div class="res-num" :style="{ color: item.color }">{{ item.count }}</div>
                </div>
            </div>
        </el-card>
    </div>
    <!-- 首页图表 -->
    <div class="min-stat">

        <div class="echarts-home">
            <VueEcharts :option="option"></VueEcharts>
        </div>
        <div class="todo-home">
            <div class="todo-tips">待办提醒</div>
            <div class="list-item-but" v-for="(item, index) in todoListData" :key="index">
                <div class="text-item">
                    <div class="text-one">{{ item.count }}</div>
                    <div class="text-two">{{ item.title }}</div>
                </div>
                <div class="todo-img">
                    <img src="../../assets/u972.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 标签页和居民指标异常 -->
    <div class="tag-num">
        <div class="residen-tag">
            <div class="tags-it-em">居民标签</div>
            <div>
                <div class="sill-item">
                    <div>高血压</div>
                    <div>200</div>
                </div>
                <el-progress :percentage="30" style="width: 366px;height: 20px;padding-right: 20px;padding-left: 20px;">
                    <el-button text></el-button>
                </el-progress>
            </div>
            <div>
                <div class="sill-item">
                    <div>冠心病</div>
                    <div>120</div>
                </div>
                <el-progress :percentage="60" style="width: 366px;height: 20px;padding-right: 20px;padding-left: 20px;">
                    <el-button text></el-button>
                </el-progress>
            </div>
            <div>
                <div class="sill-item">
                    <div>高血糖</div>
                    <div>40</div>
                </div>
                <el-progress :percentage="20" style="width: 366px;height: 20px;padding-right: 20px;padding-left: 20px;">
                    <el-button text></el-button>
                </el-progress>
            </div>
            <div>
                <div class="sill-item">
                    <div>高血脂</div>
                    <div>30</div>
                </div>
                <el-progress :percentage="10" style="width: 366px;height: 20px;padding-right: 20px;padding-left: 20px;">
                    <el-button text></el-button>
                </el-progress>
            </div>
            <div>
                <div class="sill-item">
                    <div>慢病护理</div>
                    <div>110</div>
                </div>
                <el-progress :percentage="70" style="width: 366px;height: 20px;padding-right: 20px;padding-left: 20px;">
                    <el-button text></el-button>
                </el-progress>
            </div>
            <div>
                <div class="sill-item">
                    <div>多动症</div>
                    <div>88</div>
                </div>
                <el-progress :percentage="65" style="width: 366px;height: 20px;padding-right: 20px;padding-left: 20px;">
                    <el-button text></el-button>
                </el-progress>
            </div>
        </div>
        <div class="progress-num">
            <div class="peo-item">
                <div class="resident-indicator">居民指标异常</div>
                <div class="arrow-item">
                    全部
                    <img src="../../assets/111.png" alt="">
                </div>
            </div>
            <div class="detail-container">
                <el-card class="detail-home-res" @click="toDetails">
                    <img src="../../assets/u1153.png" alt="" class="image-avatar">
                    <div class="detail-name-gender">
                        <div class="de-name">张三呢</div>
                        <div class="de-age">26岁</div>
                        <div class="de-gender">
                            <img src="../../assets/u1152.png" alt="">
                        </div>
                    </div>
                    <div class="error-item">
                        <div class="error-icon"><img src="../../assets/error_u1155.png" alt=""></div>
                        <div class="error-text">血糖过高</div>
                    </div>
                    <div>
                        <el-button type="primary" style="width: 120px;height: 35px;">查看详情</el-button>
                    </div>
                </el-card>
                <el-card class="detail-home-res" @click="toDetails">
                    <img src="../../assets/u1153.png" alt="" class="image-avatar">
                    <div class="detail-name-gender">
                        <div class="de-name">张三呢</div>
                        <div class="de-age">26岁</div>
                        <div class="de-gender">
                            <img src="../../assets/u1152.png" alt="">
                        </div>
                    </div>
                    <div class="error-item">
                        <div class="error-icon"><img src="../../assets/error_u1155.png" alt=""></div>
                        <div class="error-text">血糖过高</div>
                    </div>
                    <div>
                        <el-button type="primary" style="width: 120px;height: 35px;">查看详情</el-button>
                    </div>
                </el-card>
                <el-card class="detail-home-res" @click="toDetails">
                    <img src="../../assets/u1153.png" alt="" class="image-avatar">
                    <div class="detail-name-gender">
                        <div class="de-name">张三呢</div>
                        <div class="de-age">26岁</div>
                        <div class="de-gender">
                            <img src="../../assets/u1152.png" alt="">
                        </div>
                    </div>
                    <div class="error-item">
                        <div class="error-icon"><img src="../../assets/error_u1155.png" alt=""></div>
                        <div class="error-text">血糖过高</div>
                    </div>
                    <div>
                        <el-button type="primary" style="width: 120px;height: 35px;">查看详情</el-button>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
    <!-- 表格数据 -->
    <div class="table-data">
        <div class="table-text">本周签约情况</div>
        <el-table :data="data" stripe style="margin: 10px 20px; width: 1088px;"
            :header-cell-style="{ backgroundColor: 'rgba(242, 242, 242, 0.498039215686275)', color: '#515a6e', fontWeight: 'lighter', height: '46px' }"
            align="center" :cell-style="{ height: '46px' }">
            <el-table-column prop="name" label="团队" header-align="center" align="center" />
            <el-table-column prop="age" label="2021-01-04" header-align="center" align="center" />
            <el-table-column prop="gender" label="2021-01-05" header-align="center" align="center" />
            <el-table-column prop="id" label="2021-01-06" header-align="center" align="center" />
            <el-table-column prop="user" label="2021-01-07" header-align="center" align="center" />
            <el-table-column prop="one" label="2021-01-08" header-align="center" align="center" />
            <el-table-column prop="two" label="2021-01-08" header-align="center" align="center" />
            <el-table-column prop="tree" label="2021-01-10" header-align="center" align="center" />
        </el-table>
    </div>

</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useGlobalStore } from '../../store/global';
import { getChartsDataApi, getHomeCountApi, getTodosDataApi } from '../../api/home';
import { findTagsApi } from '../../api/tags';
import { findResidentInfoApi } from '../../api/resident';
import { useRouter } from 'vue-router';
const router = useRouter()
const pageData = ref({
    currentPage: 1,
    pageSize: 3
})
const globalStore = useGlobalStore()
// 获取顶部统计的数据
const homeCountData = ref([])
// 获取首页图表数据
const chartsData = ref({})
// 待办事项梯形的数据
const todoListData = ref([])
// 标签数据
const tagData = ref([])
// 居民数据
const residentData = ref([])
onMounted(() => {
    getHomeData()
    getChartsData()
    getTodoListData()
    getTagData()
    getResidentData()
})
const getHomeData = () => {
    getHomeCountApi().then(res => {
        if (res.code == 200) {
            console.log(res.data);
            homeCountData.value = res.data
        }
    })
}
const getChartsData = () => {
    getChartsDataApi().then(res => {
        if (res.code == 200) {
            chartsData.value = res.data
        }
    })
}
const getTodoListData = () => {
    getTodosDataApi().then(res => {
        if (res.code == 200) {
            todoListData.value = res.data
        }
    })
}
const getTagData = () => {
    findTagsApi().then(res => {
        if (res.code == 200) {
            tagData.value = res.data.rows
        }
    })
}
const getResidentData = () => {
    findResidentInfoApi({
        ...pageData.value
    }).then(res => {
        if (res.code == 200) {
            residentData.value = res.data
        }
    })
}
const toDetails = () => {
    router.push('/resident/detail/68760e3848a5eac37d63a52a')
    // 68760e3848a5eac37d63a52a
}
const data = ref([
    { name: '李明明团队', age: 200, gender: 150, id: 160, user: 120, one: 20, two: 80, tree: 90, four: 80 },
    { name: '李明明团队', age: 200, gender: 150, id: 56, user: 120, one: 20, two: 78, tree: 90, four: 80 },
    { name: '李明明团队', age: 234, gender: 150, id: 160, user: 120, one: 20, two: 80, tree: 18, four: 80 },
    { name: '李明明团队', age: 200, gender: 150, id: 160, user: 78, one: 20, two: 80, tree: 90, four: 90 },
    { name: '李明明团队', age: 200, gender: 150, id: 160, user: 120, one: 20, two: 80, tree: 90, four: 80 },
    { name: '李明明团队', age: 200, gender: 123, id: 160, user: 120, one: 20, two: 80, tree: 90, four: 60 },
    { name: '李明明团队', age: 11, gender: 150, id: 55, user: 88, one: 20, two: 80, tree: 12, four: 80 },
])
const option = computed(() => {
    return {
        title: {
            text: '数据概况',
            top: '10px',
            left: '20px',
        },
        legend: {
            icon: 'circle',
            data: ['居民数量', '签约量', '服务量'],
            top: '10px'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        // 辅助线
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: chartsData.value.date
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '居民数量',
                type: 'line',
                stack: 'Total',
                symbol: 'none',
                data: chartsData.value.residents
            },
            {
                name: '签约量',
                type: 'line',
                legendIcon: 'triangle',
                stack: 'Total',
                symbol: 'none',
                data: chartsData.value.signs
            },
            {
                name: '服务量',
                type: 'line',
                stack: 'Total',
                symbol: 'none',
                data: chartsData.value.services
            },
        ]
    };
})

</script>

<style scoped lang="scss">
.home-title {
    font-size: 18px;
    color: #333333E5;
    font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK';
    font-weight: 500;
}

.top-statistics {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
}

.stat-item {
    display: flex;
}

.item-img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    margin-top: 10px;

    img {
        width: 16px;
        height: 16px;
    }
}

.resident {
    color: #999999;
    font-size: 13px;
}

.res-num {
    font-size: 30px;
    color: #2984F8;
    margin-top: 10px;
    font-family: 'PingFangHK-Semibold', 'PingFang HK Semibold', 'PingFang HK';
    font-weight: 650;
}

.min-stat {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.echarts-home {
    width: 863px;
    height: 451px;
    // border: 1px solid;
    background-color: #ffffff;
    border-radius: 10px;

}

.todo-home {
    width: 265px;
    height: 451px;
    background-color: #fff;
    border-radius: 10px;
    // border: 1px solid;

}

.list-item-but {
    display: flex;
    justify-content: space-between;
    margin: 5px 20px;
    border-bottom: 1px solid #F2F7FB;
    padding-bottom: 5px;
}

.todo-tips {
    margin-left: 20px;
    margin-top: 20px;
    padding-bottom: 10PX;
    font-size: 16px;
    color: #333333;
    border-bottom: 1px solid #F2F7FB;
}

.todo-img {
    img {
        width: 8px;
        height: 8px;
    }
}

.text-one {
    font-size: 20px;
    color: #333333;
}

.text-two {
    font-size: 13px;
    color: #999999;
    margin-top: 5px;
    margin-bottom: 10px;
}

.tag-num {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

.residen-tag {
    width: 350px;
    height: 384px;
    background-color: #fff;
    border-radius: 10px;
}

.progress-num {
    width: 775px;
    height: 384px;
    background-color: #fff;
    border-radius: 10px;
}

.tags-it-em {
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.sill-item {
    padding: 10px 20px 0;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #999999;
}

.resident-indicator {
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333333;
}

.peo-item {
    display: flex;
    justify-content: space-between;
}

.arrow-item {
    font-size: 12px;
    color: #999999;
    padding-right: 20px;
    padding-top: 20px;

    img {
        width: 14px;
        height: 12px;
    }
}

.detail-home-res {
    width: 230px;
    height: 280px;
    margin: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // border: 1px solid #e3e3e3;
    border-radius: 10px;
}

.detail-container {
    display: flex;
}

.image-avatar {
    width: 84px;
    margin-left: 10px;
}

.detail-name-gender {
    display: flex;
    margin-left: 10px;
}

.de-name {
    font-size: 18px;
    color: #333333;
    margin-right: 10px;
}

.de-age {
    font-size: 13px;
    color: #cccccc;
    margin-right: 10px;
    margin-top: 5px;
}

.error-item {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 16px;
}

.error-text {
    color: #FA746B;
    font-size: 13px;
    margin-left: 10px;
}

.table-data {
    width: 1150px;
    height: 474px;
    background-color: #ffffff;
    margin-top: 20px;
    border-radius: 10px;
}

.table-text {
    padding: 20px 20px 10px;
}
</style>
<style>
html,
body {
    overflow-x: hidden;
    /* 隐藏横向滚动条 */
    width: 100%;
    /* 确保宽度不超出视口 */
}
</style>